<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<style>
    [v-cloak] {
        display: none;
    }

</style>
<body>
<!-- view -->
<div id="app" v-cloak>
    <!--组件-->
    <p>{{message}}</p>
    <p>{{info.name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    <!--model-->
    var vm = new Vue({
        el: "#app",

        mounted: function() {
            console.log("mounted")
            axios.get("../data.json").then(response=>{console.log(response.data);this.info=response.data})
        },
        created: function() {
            console.log("created")
        },
        data: function () {
            return {
                message: 'xxx',
                //请求返回格式，必须和JSON字符串一样
                info:{
                    "name": null,
                    "url": null,
                    "page": "1",
                    "isNonProfit":"true",
                    "address": {
                        "street": null,
                        "city":  null,
                        "country":  null
                    },
                }
            };
        }


    });
</script>
</body>
</html>